<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="height: 32px">
        <span>年级</span>
      </div>
      <div>
        <el-table
          :height="tableHeight"
          :max-height="tableHeight"
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            align="center"
            prop="name"
            label="年级">
            <template slot-scope="{ row }">
              <el-link type="primary" @click="gradeClick(row)">{{ row.name }}</el-link>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="verName"
            label="当前版本">
            <template slot-scope="{ row }">
              <el-link type="primary" @click="evalClick(row)">{{ row["verName"] }}</el-link>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="操作">
            <template slot-scope="{ row }">
              <el-row>
                <el-col :span="12">
                  <el-button type="text" @click="createVer(row)">创建版本</el-button>
                </el-col>
                <el-col :span="12">
                  <el-button type="text" @click="createClazzEval(row)">派发</el-button>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import {ListByGradeEval, ClazzEval} from '@/api/bt/student-eval/grade'

export default {
  name: "SessionForm",
  data() {
    return {
      //表格高度根据窗口
      tableHeight: window.innerHeight - 220,
      screenHeight: window.innerHeight,
      // 表格数据
      tableData: [],
    }
  },
  mounted() {
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenHeight = window.innerHeight
        this.screenHeight = window.screenHeight;
      })()
    }
  },
  watch: {
    screenHeight(val) {
      this.screenHeight = val
      this.tableHeight = this.screenHeight - 220
    }
  },
  created() {
    this.getGradeList(false);
  },
  methods: {
    getGradeList(flag) {
      ListByGradeEval().then((res) => {
        this.tableData = res.data;
        if (flag) {
          this.afterCreate()
        }
      })
    },
    //点击年级
    gradeClick(row) {
      this.$emit("handle-grade", row)
    },
    // 点击版本
    evalClick(row) {
      this.$emit("handle-eval", row)
    },
    //创建版本
    createVer(row) {
      this.$confirm('此操作将创建新的评估表, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit("handle-create", row)
      })
    },
    //创建版本后将 创建的信息传出
    afterCreate() {
      this.$emit("after-create", this.tableData)
    },
    //派发
    createClazzEval(row) {
      this.$confirm('此操作派发此评估表, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ClazzEval(row).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1500,
          })
          this.getGradeList(false)
          this.evalClick(row)
        })
      })
    },
  }
}
</script>
<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

::v-deep.el-table--border {
  border-bottom: 1px solid #EBEEF5;
}
</style>
